<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


    <script type="text/javascript">
        // 阻止vue启动时候生成生产提示
        Vue.config.productionTip = false

        let person = {
            name: "aBiu",
            sex: "男",
            // age: 18,     // 这个可以在控制台修改
        }

        let num = 18

        // 添加属性，这样添加的不允许枚举，不能遍历
        Object.defineProperty(person, 'age', {
            // value: 18,
            // enumerable: true,   // 默认false，设置true，就可以允许枚举，可以遍历
            // writable: true,      // 默认false，设置true，就可以在控制台修改成功
            // configurable: true,      // 默认false，设置true，就可以在控制台被删除

            // 上面4个事基本属性，下面这个get和set是高级属性
            get: function () {
                console.log('读取num了')
                return num
            },
            set: function (n) {
                console.log('修改num了')
                num = n
            }
        })

        console.log(person);
        // 打印出所有key
        console.log(Object.keys(person));
        console.log(Object.values(person));


        // 浏览器控制台测试一下，输入 person.age     pserson.age = 20

    </script>
</body>

</html>